<template>
  <div class="t-progress-circle">
    <svg class="t-progress-circle__svg" viewBox = '0 0 100 100'>
      <path :d="pString" :stroke="trailColor" :stroke-width="trailWidth" fill-opacity="0"></path>
      <path :d="pString" :stroke="strokeColor" :stroke-width="strokeWidth" fill-opacity='0' stroke-linecap='round' :style="pStyle" />
    </svg>
    <div class="t-progress-circle__inner-content">
      <div class="t-progress-circle__inner-content__title">
        <slot name="title"></slot>
      </div>
      <div class="t-progress-circle__inner-content__rate" :style="rateStyle">
        <slot name="rate"></slot>
      </div>
    </div>
  </div>
</template>

<script>
  const colorMap = {
    normal: '#2db7f5',
    exception: '#ff6600',
    success: '#87d068',
  };
  
  export default {
    props: {
      status: {
        type: String,
        default: 'normal',
      },
      trailWidth: {
        type: Number,
        default: 6.5,
      },
      strokeWidth: {
        type: Number,
        default: 6.5,
      },
      trailColor: {
        type: String,
        default: '#e9e9e9',
      },
      percent: {
        type: Number,
        default: 25,
      },
    },
    computed: {
      radius() {
        return 50 - (this.strokeWidth / 2);
      },
      pString() {
        return `M 50,50 m 0 -${this.radius}
        a ${this.radius} ${this.radius} 0 1 1 0 ${2 * this.radius}
        a ${this.radius} ${this.radius} 0 1 1 0 -${2 * this.radius}`;
      },
      strokeColor() {
        return colorMap[this.status];
      },
      rateStyle() {
        return `color: ${colorMap[this.status]}`;
      },
      pStyle() {
        const len = Math.PI * 2 * this.radius;
        let percent = this.percent;
        if (this.percent >= 100) {
          percent = 100;
        }
        return {
          strokeDasharray: `${len}px ${len}px`,
          strokeDashoffset: `${(((100 - percent) / 100) * len)}px`,
          transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease',
        };
      },
    },
  };
</script>

<style>
</style>